<template>
  <AgGridVue class="ag-grid-vue" v-bind="props" :theme="myTheme" :locale-text="localeText">
  </AgGridVue>
</template>

<script lang="ts" setup generic="T extends object">
import { AllCommunityModule, ModuleRegistry, themeQuartz } from 'ag-grid-community'
import { RowGroupingModule, LicenseManager } from 'ag-grid-enterprise'
import { ContextMenuModule, ColumnMenuModule } from 'ag-grid-enterprise'
import { CellSelectionModule, ClipboardModule, ExcelExportModule, CsvExportModule } from 'ag-grid-enterprise'
import { TextFilterModule, NumberFilterModule, ValidationModule, MenuModule } from 'ag-grid-enterprise'
import { AgGridVue } from 'ag-grid-vue3' // Vue Data Grid Component
import type { IAgGridProps } from './BaseAgGrid'

// Register all Community features
// 激活码破解 https://www.cnblogs.com/soarowl/p/18172779
ModuleRegistry.registerModules([AllCommunityModule, RowGroupingModule])

// ContextMenuModule 上下文菜单
// ColumnMenuModule  列菜单
// MenuModule        上下文菜单 和 列菜单
ModuleRegistry.registerModules([ContextMenuModule, ColumnMenuModule])
ModuleRegistry.registerModules([CellSelectionModule, ClipboardModule, ExcelExportModule, CsvExportModule])
ModuleRegistry.registerModules([TextFilterModule, ValidationModule, NumberFilterModule, MenuModule])

LicenseManager.setLicenseKey(
  // 'AgGridLicense66fwc79n[NORMAL][v0102]_NDA3MDk2NjQwMDAwMA==80908dd5fb71b58d3ce28b2ed320216d',
  '[v3][RELEASE][0102]_NDg2Njc4MzY3MDgzNw==16d78ca762fb5d2ff740aed081e2af7b',
)

const myTheme = themeQuartz.withParams({
  // 主题色
  accentColor: '#ffa500',
  browserColorScheme: 'inherit',
  headerFontFamily: [
    '-apple-system',
    'BlinkMacSystemFont',
    'Segoe UI',
    'Roboto',
    'Oxygen-Sans',
    'Ubuntu',
    'Cantarell',
    'Helvetica Neue',
    'sans-serif',
  ],
  rowHeight: 20,
  headerFontSize: 14,
  headerFontWeight: 500,
  iconSize: 16,
  rowVerticalPaddingScale: 1,
  spacing: 2,
  wrapperBorder: false,
  headerRowBorder: false,
  rowBorder: { style: 'solid', width: 1, color: '#d9d9db' },
  columnBorder: { style: 'solid', color: '#d9d9db' },
})

// [plugin:vite:setup-name-support] [@vue/compiler-sfc] Failed to resolve import source "./BaseAgGrid".
// 尝试使用 绝对路径 / 别名路径 导入 BaseAgGrid.ts
type IProps<T> = Omit<
  IAgGridProps<T>,
  | 'suppressMakeColumnVisibleAfterUnGroup'
  | 'suppressRowClickSelection'
  | 'groupSelectsChildren'
  | 'suppressRowDeselection'
  | 'unSortIcon'
  | 'suppressLoadingOverlay'
  | 'enableRangeSelection'
  | 'enableRangeHandle'
  | 'enableFillHandle'
  | 'suppressClearOnFillReduction'
  | 'suppressRowGroupHidesColumns'
  | 'suppressCopyRowsToClipboard'
  | 'groupSelectsFiltered'
  | 'groupRemoveSingleChildren'
  | 'groupRemoveLowestSingleChildren'
  | 'suppressMultiRangeSelection'
  | 'suppressPropertyNamesCheck'
  | 'rowMultiSelectWithClick'
  | 'suppressBrowserResizeObserver'
  | 'suppressCopySingleCellRanges'
  | 'suppressAdvancedFilterEval'
>

const props = defineProps<IProps<T>>()

const localeText = {
  page: '页',
  more: '更多',
  to: '到',
  applyFilter: '确定',
  resetFilter: '重制',
  clearFilter: '清除',
  cancelFilter: '取消',
  of: 'of',
  loadingOoo: '加载中...',
  selectAll: '查询全部',
  searchOoo: '查询...',
  blanks: '空白',
  filterOoo: '过滤...',
  blank: '为空',
  notBlank: '不为空',
  equals: '相等',
  notEqual: '不相等',
  lessThan: '小于',
  greaterThan: '大于',
  lessThanOrEqual: '小于等于',
  greaterThanOrEqual: '大于等于',
  inRange: '范围',
  contains: '包含',
  notContains: '不包含',
  startsWith: '开始于',
  endsWith: '结束于',
  group: '目录',
  columns: '列',
  filters: '筛选',
  values: '值',
  noRowsToShow: '数据为空',
  groupBy: '排序',
  ungroupBy: '不排序',
  resetColumns: '重置列',
  expandAll: '展开全部',
  collapseAll: '关闭',
  toolPanel: '工具面板',
  export: '导出',
  csvExport: '导出为CSV格式文件',
  excelExport: '导出到Excel',

  none: '无',

  copy: '复制',
  cut: '剪切',
  copyWithHeaders: '携带表头复制',
  copyWithGroupHeaders: ' 携带分组表头复制',
  ctrlC: 'ctrl + C',
  paste: '粘贴',
  ctrlV: 'ctrl + V',

  // Column Menu
  autosizeThisColumn: '本列宽度自适应',
  autosizeAllColumns: '本表宽度自适应',
  sortAscending: '升序排列',
  sortDescending: '降序排列',
  sortUnSort: '清除排序',
  pinColumn: '固定列',
  pinLeft: '固定在左',
  pinRight: '固定在右',
  noPin: '不固定',
  columnChooser: '选择列',
  chooseColumns: '选择列',

  pivotMode: '仅显示聚合',
  groups: '行分组',
  rowGroupColumnsEmptyMessage: '将列拖动至此处进行数据分组',
  valueColumnsEmptyMessage: '将列拖动至此处进行数据聚合运算',
  pivots: '色谱柱标签',
  pivotColumnsEmptyMessage: '拖到此处可设置列标签',
}
</script>

<style scoped>
.ag-grid-vue {
  height: 100%;
}

.ag-grid-vue :deep(.ag-header-cell-comp-wrapper) {
  justify-content: center;
}

/* 列名称居中 */
/* .ag-grid-vue :deep(.ag-header-cell-label) {
  justify-content: center;
} */

/* 选中偶数行 */
.ag-grid-vue :deep(.ag-row-even) {
  /* background-color: red; 浅灰色 */
}

/* 选中奇数行（可选，用于覆盖默认） */
.ag-grid-vue :deep(.ag-row-odd) {
  /* background-color: yellow; 白色 */
}

/* *********************** pinned left ************************* */
/* 或者，如果你想自定义斑马纹颜色，可以直接用 :nth-child */
.ag-grid-vue :deep(.ag-pinned-left-cols-viewport .ag-row) {
  background-color: #eaf1ff;
}

/* 偶数行 */
.ag-grid-vue :deep(.ag-pinned-left-cols-viewport .ag-row:nth-child(even)) {
  /* background-color: #d1f1d1; */
  /* 偶数行：浅蓝色 */
}

/* 奇数行 */
.ag-grid-vue :deep(.ag-pinned-left-cols-viewport .ag-row:nth-child(odd)) {
  background-color: #ffffff;
  /* 奇数行：白色 */
}

/* *********************** pinned center ************************* */
/* 或者，如果你想自定义斑马纹颜色，可以直接用 :nth-child */
.ag-grid-vue :deep(.ag-center-cols-viewport .ag-row) {
  background-color: #eaf1ff;
}

/* 偶数行 */
.ag-grid-vue :deep(.ag-center-cols-viewport .ag-row:nth-child(even)) {
  /* background-color: #d1f1d1; */
  /* 偶数行：浅蓝色 */
}

/* 奇数行 */
.ag-grid-vue :deep(.ag-center-cols-viewport .ag-row:nth-child(odd)) {
  background-color: #ffffff;
  /* 奇数行：白色 */
}
</style>
